<template>
<!--项目实施情况-->
  <div>
    <div >
      <div style="margin: 0 0 10px 0;font-weight: 800;">具备开工实施条件：9.92万亩</div>
      <el-table
        :header-cell-style="{backgroundColor: '#e7f6f3'}"
        :data="typeData"
        border
        style="padding: 10px 0;height: 180px;overflow: auto;">
        <el-table-column prop="type" label="类型" show-overflow-tooltip></el-table-column>
        <el-table-column prop="area" label="区域" show-overflow-tooltip></el-table-column>
        <el-table-column prop="acreage" label="面积" show-overflow-tooltip ></el-table-column>
      </el-table>
    </div>
    <div id="condition" style="width: 80%;height: 300px;margin: 10px"></div>
    <div style="margin: 0 0 30px 30%;">
      <div v-for="(item, index) in conditionData" :key="index" style="display: flex;align-items: center;margin: 10px">
        <div :style="{background:item.itemStyle.color,width:'15px',height:'12px',margin:'10px'}"></div><span>{{item.name}}</span>
      </div>
    </div>
    <div style="margin-top: 15px;font-weight: 800;">
      <div style="margin: 10px 0">截止3月15日，已完成：9363.3亩</div>
      <div id="complete" style="width: 90%;height: 400px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "implementation",
  data(){
    return{
      typeData:[
        {type:'森林抚育',area:'托县、和林县、武川县、回民区、赛罕区',acreage:'7.12'},
        {type:'退化草原生态修复',area:'新城区、和林县、武川县、回民区',acreage:'2.72'},
        {type:'沙化土地治理',area:'托县',acreage:'0.07'},
        {type:'林相优化',area:'托县、和林县、武川县、回民区、赛罕区',acreage:'0.0083'}],
      condition:undefined,
      complete:undefined,
      completeData:[
        {value: 1063.3, name: '森林抚育',},
        {value: 240, name: '退化林修复',},
        {value: 8000 , name: '治沙种草',},
        {value: 60, name: '草原围栏',},
      ],
      conditionData:[
        {value:7.12, name:'森林抚育 托县、和林县、武川县、回民区、赛罕区',itemStyle: {color: '#9bd08c'}},
        {value:2.72, name:'退化草原生态修复 新城区、和林县、武川县、回民区',itemStyle: {color: 'green'}},
        {value:0.07, name:'沙化土地治理 托县',itemStyle: {color: '#E3F170'}},
        {value:0.0083, name:'林相优化 托县、和林县、武川县、回民区、赛罕区',itemStyle: {color: '#FFAD6A'}}
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart1()
      this.initChart2()
    })
  },
  methods:{
    initChart1(){
      const ctx = document.getElementById('condition')
      this.condition = echarts.init(ctx)
      const option = {
        title: {
          text: '实施条件',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c}"
        },
        xAxis: {
          type: 'category',
          data: [ '', '', '', ''],
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.conditionData,
          type: 'bar',
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]

      };
      this.condition.setOption(option)
    },
    initChart2(){
      const ctx = document.getElementById('complete')
      this.complete = echarts.init(ctx)
      const option = {
        title: {
          text: '',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)"
        },
        color:['#9bd08c','green','#E3F170','#FFAD6A'],
        legend: {
          bottom: 10,
          left: 'center',
          data: ['森林抚育', '退化林修复','治沙种草', '草原围栏']
        },
        series: [{
          type: 'pie',
          radius: '65%',
          center: ['50%', '50%'],
          selectedMode: 'single',
          data: this.completeData,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
      this.complete.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
